{% extends 'base.html' %}
{% load static %}

{% block title %}{{ profile_user.nickname|default:profile_user.username }} - 主页{% endblock %}

{% block extra_css %}
<style>
    .profile-container {
        max-width: 800px;
        margin: 40px auto;
        padding: 0 20px;
    }

    .profile-card {
        background: white;
        border-radius: 12px;
        box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        overflow: hidden;
    }

    .profile-header {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        padding: 40px 30px;
        text-align: center;
        color: white;
    }

    .profile-avatar {
        width: 120px;
        height: 120px;
        border-radius: 50%;
        border: 4px solid white;
        margin: 0 auto 20px;
        object-fit: cover;
        box-shadow: 0 4px 12px rgba(0,0,0,0.2);
    }

    .profile-name {
        font-size: 28px;
        font-weight: 600;
        margin-bottom: 8px;
    }

    .profile-username {
        font-size: 16px;
        opacity: 0.9;
    }

    .profile-body {
        padding: 30px;
    }

    .profile-actions {
        display: flex;
        gap: 15px;
        justify-content: center;
        margin-bottom: 30px;
    }

    .action-btn {
        padding: 12px 30px;
        border: none;
        border-radius: 8px;
        font-size: 15px;
        font-weight: 500;
        cursor: pointer;
        transition: all 0.3s;
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .action-btn i {
        font-size: 16px;
    }

    .btn-delete {
        background: #ff4757;
        color: white;
    }

    .btn-delete:hover {
        background: #ff3742;
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(255, 71, 87, 0.4);
    }

    .btn-add {
        background: #667eea;
        color: white;
    }

    .btn-add:hover {
        background: #5568d3;
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
    }

    .btn-message {
        background: #28a745;
        color: white;
    }

    .btn-message:hover {
        background: #218838;
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(40, 167, 69, 0.4);
    }

    .btn-pending {
        background: #ffc107;
        color: #333;
        cursor: not-allowed;
    }

    .profile-info {
        background: #f8f9fa;
        padding: 20px;
        border-radius: 8px;
    }

    .info-item {
        display: flex;
        padding: 12px 0;
        border-bottom: 1px solid #e0e0e0;
    }

    .info-item:last-child {
        border-bottom: none;
    }

    .info-label {
        font-weight: 600;
        color: #555;
        min-width: 120px;
    }

    .info-value {
        color: #333;
        flex: 1;
    }

    .back-link {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        color: #667eea;
        text-decoration: none;
        margin-bottom: 20px;
        font-size: 14px;
        transition: all 0.3s;
    }

    .back-link:hover {
        color: #5568d3;
        gap: 12px;
    }

    .back-link i {
        font-size: 16px;
    }
</style>
{% endblock %}

{% block content %}
<div class="profile-container">
    <a href="{% url 'social:chat_main' %}" class="back-link">
        <i class="fas fa-arrow-left"></i>
        返回消息列表
    </a>

    <div class="profile-card">
        <div class="profile-header">
            <img src="{% if profile_user.avatar %}{{ profile_user.avatar.url }}{% else %}{% static 'imgs/default-avatar.jpg' %}{% endif %}"
                 alt="{{ profile_user.nickname }}"
                 class="profile-avatar">
            <div class="profile-name">{{ profile_user.nickname|default:profile_user.username }}</div>
            <div class="profile-username">@{{ profile_user.username }}</div>
        </div>

        <div class="profile-body">
            <div class="profile-actions">
                {% if is_friend %}
                    <button class="action-btn btn-delete" id="friend-action-btn" onclick="removeFriend({{ profile_user.id }})">
                        <i class="fas fa-user-times"></i>
                        删除好友
                    </button>
                    <button class="action-btn btn-message" onclick="startConversation({{ profile_user.id }})">
                        <i class="fas fa-comment"></i>
                        发送消息
                    </button>
                {% elif pending_status == 'sent' %}
                    <button class="action-btn btn-pending" disabled>
                        <i class="fas fa-clock"></i>
                        已发送好友请求
                    </button>
                {% elif pending_status == 'received' %}
                    <button class="action-btn btn-add" onclick="acceptFriendRequest()">
                        <i class="fas fa-user-check"></i>
                        接受好友请求
                    </button>
                {% else %}
                    <button class="action-btn btn-add" id="friend-action-btn" onclick="addFriend({{ profile_user.id }})">
                        <i class="fas fa-user-plus"></i>
                        添加好友
                    </button>
                {% endif %}
            </div>

            <div class="profile-info">
                <div class="info-item">
                    <div class="info-label">用户名</div>
                    <div class="info-value">{{ profile_user.username }}</div>
                </div>
                <div class="info-item">
                    <div class="info-label">昵称</div>
                    <div class="info-value">{{ profile_user.nickname|default:"未设置" }}</div>
                </div>
                <div class="info-item">
                    <div class="info-label">邮箱</div>
                    <div class="info-value">{{ profile_user.email|default:"未设置" }}</div>
                </div>
                <div class="info-item">
                    <div class="info-label">加入时间</div>
                    <div class="info-value">{{ profile_user.date_joined|date:"Y年m月d日" }}</div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
function getCookie(name) {
    let cookieValue = null;
    if (document.cookie && document.cookie !== '') {
        const cookies = document.cookie.split(';');
        for (let i = 0; i < cookies.length; i++) {
            const cookie = cookies[i].trim();
            if (cookie.substring(0, name.length + 1) === (name + '=')) {
                cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                break;
            }
        }
    }
    return cookieValue;
}

// 删除好友
function removeFriend(userId) {
    if (!confirm('确定要删除这个好友吗？')) {
        return;
    }

    fetch(`/social/friends/remove/${userId}/`, {
        method: 'POST',
        headers: {
            'X-CSRFToken': getCookie('csrftoken')
        }
    })
    .then(res => res.json())
    .then(data => {
        if (data.success) {
            alert('已删除好友');
            // 更新按钮为添加好友
            const btn = document.getElementById('friend-action-btn');
            btn.className = 'action-btn btn-add';
            btn.innerHTML = '<i class="fas fa-user-plus"></i> 添加好友';
            btn.onclick = function() { addFriend(userId); };
        } else {
            alert('删除失败: ' + data.message);
        }
    })
    .catch(error => {
        console.error('删除好友失败:', error);
        alert('删除失败，请重试');
    });
}

// 添加好友
function addFriend(userId) {
    fetch(`/social/friends/request/send/${userId}/`, {
        method: 'POST',
        headers: {
            'X-CSRFToken': getCookie('csrftoken')
        }
    })
    .then(res => res.json())
    .then(data => {
        if (data.success) {
            alert('好友请求已发送');
            // 更新按钮为待处理状态
            const btn = document.getElementById('friend-action-btn');
            btn.className = 'action-btn btn-pending';
            btn.innerHTML = '<i class="fas fa-clock"></i> 已发送好友请求';
            btn.disabled = true;
            btn.onclick = null;
        } else {
            alert('发送失败: ' + data.message);
        }
    })
    .catch(error => {
        console.error('发送好友请求失败:', error);
        alert('发送失败，请重试');
    });
}

// 开始对话
function startConversation(userId) {
    fetch(`/social/conversations/start/${userId}/`, {
        method: 'POST',
        headers: {
            'X-CSRFToken': getCookie('csrftoken')
        }
    })
    .then(res => res.json())
    .then(data => {
        if (data.success) {
            window.location.href = '{% url "social:chat_main" %}';
        } else {
            alert('创建对话失败: ' + data.message);
        }
    })
    .catch(error => {
        console.error('创建对话失败:', error);
        alert('创建对话失败，请重试');
    });
}
</script>
{% endblock %}
